<!DOCTYPE html>
<html>

	<head>
		<meta charset=utf-8>
		<link rel="stylesheet" type="text/css" href="bootstrap-4.6.2-dist/"/>
		<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="./static/css/hotel.css" />
		<link rel="stylesheet" type="text/css" href="./static/css/footer.css">
		<script type="text/javascript" src="./static/js/jquery.min.js"></script>
		<script type="text/javascript" src="./static/js/bootstrap.min.js"></script>
		<script src="layDate-v5.0.9/laydate/laydate.js"></script>
		
		<title>旅游酒店</title>
	</head>

	<body>
	<div class="container">
		<nav class="navbar navbar-default" style="background: #222222;border: 0;border-radius: 0 ">
			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
						data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">旅游酒店</span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
						<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand" href="index.html" style="color: white">首页</a>
					<a class="navbar-brand" href="#" style="color: white">&gt;&gt;</a>
					<a class="navbar-brand" href="#" style="color: white">旅游酒店</a>
				</div>

				<!-- Collect the nav links, forms, and other content for toggling -->
				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
					</ul>
				</div>
			</div>
		</nav>

		<!--条件选择-->

		<div class="row container" style="width:90%;border:none;float:left">

			<div class="col-md-11 types">

				<form class="form-inline" style="margin-top: 20px">
					<div class="form-group">
						<select class="form-control" style="width: 20rem">
							<option>目的地1</option>
							<option>目的地2</option>
							<option>目的地3</option>
							<option>目的地4</option>
							<option>目的地5</option>
						</select>
					</div>

					<div class="form-group">
						<input type="text" class="form-control" id="test1" placeholder="入住日期">
					</div>
					<div class="form-group">
						<input type="text" class="form-control" id="test2" placeholder="退房日期">
					</div>
					<button type="submit" class="btn btn-infor">查看价格</button>
				</form>

				<div class="select">

					<!--档次选择-->
					<div class="level">
						<div class="level-l">
							<span>档次：</span>
						</div>
						<div class=" level-r">
							<ul class="list-unstyled">
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">二星级/经济型
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">三星级
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">四星级
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">五星级
									</label>
								</li>
							</ul>
						</div>
					</div>

					<!-- 价格选择-->
					<div class="price">
						<div class="price-l">
							<span>价格：</span>
						</div>
						<div class=" price-r">
							<ul class="list-unstyled">
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option2">150元以下
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option2">150-300元
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option2">300-600元
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option2">600-1000元
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option2e">1000元以上
									</label>
								</li>
								<li style="width:30%">

									自定义&nbsp<input type="text" style="width:15%">--<input type="text" style="width:15%">

								</li>
							</ul>
						</div>
					</div>

					<!--特色选择-->
					<div class="feature">
						<div class="feature-l">
							<span>特色：</span>
						</div>
						<div class="feature-r">
							<ul class="list-unstyled">
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
										休闲度假
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
										休闲名宿
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">温泉
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">青年旅社
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">购物便捷
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">精品酒店
									</label>
								</li>
							</ul>
						</div>
					</div>

					<!--位置选择-->
					<div class="place" style="border-bottom: none">
						<div class=" place-l">
							<span>位置：</span>
						</div>
						<div class="place-r">
							<ul class="list-unstyled">
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
										距目的地200米以内
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
										距目的地500米以内
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">距目的地1000米以内
									</label>
								</li>
								<li>
									<label class="radio-inline">
										<input type="radio" name="inlineRadioOptions" id="inlineRadio1"
											value="option1">距目的地1000米以上
									</label>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="row  hot" style="width:80%;margin:0 auto">
			<div class="col-xs-6 col-md-3">
				<div class="thumbnail">
					<a href="hotel-detail.html"><img src="img/7.jpg" alt="..."></a>
					<div class="caption">
						<h5>圣西斯酒店</h5>
						<p>￥551.00</p>
						<p>
							<a href="hotel-detail.html" class="btn btn-infor" role="button">查看详情</a>
						</p>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="thumbnail">
					<a href="hotel-detail.html"><img src="img/2.jpg" alt="..."></a>
					<div class="caption">
						<h5>圣西斯酒店</h5>
						<p>￥457.70</p>
						<p>
							<a href="hotel-detail.html" class="btn btn-infor" role="button">查看详情</a>
						</p>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="thumbnail">
					<a href="hotel-detail.html"><img src="img/3.jpg" alt="..."></a>
					<div class="caption">
						<h5>圣西斯酒店</h5>
						<p>￥375.60</p>
						<p>
							<a href="hotel-detail.html" class="btn btn-infor" role="button">查看详情</a>
						</p>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-md-3">
				<div class="thumbnail">
					<a href="hotel-detail.html"><img src="img/4.jpg" alt="..."></a>
					<div class="caption">
						<h5>圣西斯酒店</h5>
						<p>￥443.90</p>
						<p>
							<a href="hotel-detail.html" class="btn btn-infor" role="button">查看详情</a>
						</p>
					</div>
				</div>
			</div>
		</div>	
	</div>
		
		<script>
			laydate.render({
				elem: '#test1' 
			});
			laydate.render({
				elem: '#test2' 
			});
		</script>
		
	</body>
</html>


